<template>
    <div class="pgae">
        <h3 class="title">案件审批</h3>

        <div class="card-box">
            <div v-for="item in cards" :key="item.id" class="card">
                <span>{{ item.title }}</span>
                <span class="num">{{ item.num }}</span>
                <span>日 <i v-if="item.num > 0" class="el-icon-top"></i>
                    <i v-else class="el-icon-bottom"></i>
                    {{ item.percent }} %</span>
            </div>
        </div>

        <el-form :inline="true" :model="searchForm" label-width="100px">
            <el-form-item label="案件类型">
                <el-select v-model="searchForm.case_type" placeholder="请选择案件类型">
                    <el-option v-for="opt in typeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="审批状态">
                <el-select v-model="searchForm.case_status" placeholder="请选择审批状态">
                    <el-option v-for="opt in statusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchCase">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border>
            <el-table-column prop="case_no" label="案件编码" align="center" />
            <el-table-column prop="case_name" label="案件名称" align="center" />
            <el-table-column prop="case_submit_time" label="提交时间" align="center" />
            <el-table-column prop="case_type" label="案件类型" align="center" />
            <el-table-column prop="case_status" label="案件状态" align="center" />
            <el-table-column prop="apply_police" label="申请民警" align="center" />
            <el-table-column prop="sign_police" label="签收民警" align="center" />
            <el-table-column prop="handle_police" label="办理民警" align="center" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="reviewCase(scope.row)">查看详情</el-button>
                    <el-button size="mini" type="text" @click="approveCase(scope.row)">审批</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next" :total="totalItems" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchForm: {
                case_type: '0',
                case_status: '0'
            },
            cards: [{ id: 1, title: '全部审批', num: 253, percent: 112.61 }, { id: 2, title: '审批中', num: 77, percent: 79.07 }, { id: 3, title: '审批完成', num: 152, percent: 105.41 }],
            typeOptions: [
                { value: '0', label: '全部' },
                { value: '1', label: '刑事案件' },
                { value: '2', label: '行政案件' },
                { value: '3', label: '其它' },
            ],
            statusOptions: [
                { value: '0', label: '全部' },
                { value: '1', label: '暂存' },
                { value: '2', label: '待审核' },
                { value: '3', label: '待分配' },
                { value: '4', label: '已审核-待签收' },
                { value: '5', label: '已签收-待办理' },
                { value: '6', label: '已办理' }
            ],
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            totalItems: 10
        }
    },
    mounted() {
        const caseTypeArr = ['刑事案件', '行政案件', '其它']
        const caseStatusArr = ['暂存', '待审核', '待分配', '已审核-待签收', '已签收-待办理', '已办理']

        const data = Array.from({ length: 10 }, (v, k) => {
            return {
                case_no: `GDcy20240301${k}`,
                case_name: `案件名称_${k}`,
                case_submit_time: `2024-03-01`,
                case_type: caseTypeArr[k % 3],
                case_status: caseStatusArr[k % 6],
                apply_police: `张三`,
                sign_police: `李四`,
                handle_police: `王五`
            }
        })
        this.tableData = [...data]
        this.getList()
    },
    methods: {
        searchCase() {
            this.currentPage = 1
            this.getList()
        },
        reviewCase(row) {
            this.$router.push({ name: 'caseDetail', params: { id: row.case_no } })
        },
        approveCase(row) {
            this.$router.push({ name: 'caseDetail2', params: { id: row.case_no } })
        },
        getList() {
            // Implement your API call to fetch the data based on searchKeyword, currentPage, and pageSize
            // Update tableData and totalItems accordingly
        },
        handleSizeChange(size) {
            this.pageSize = size
            this.getList()
        },
        handleCurrentChange(page) {
            this.currentPage = page
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    .title {
        margin: 0px auto 30px;
    }
}

.card-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    .card {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 16px;

        .num {
            font-size: 20px;
            font-weight: bold;
            padding: 4px 0;
        }

        .el-icon-top {
            color: #F56C6C;
        }

        .el-icon-bottom {
            color: #67C23A;
        }
    }

}
</style>